<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>   
<style type="text/css">
body {
	background-color: #d0e4fe;
}

h2 {
	font-size: 24px;
	color: text-align:center;
}

td {
	font-size: 13px;
}

.int {
	height: 30px;
	text-align: left;
	width: 600px;
}

label {
	width: 200px;
	margin-left: 20px;
}

.high {
	color: red;
}

.msg {
	font-size: 13px;
}

.onError {
	color: red;
}

.onSuccess {
	color: green;
}
</style>
</head>
<script type="text/javascript">
	window.onload = function() {
		// 通过标签名获取select对象
		var selects = document.getElementsByTagName("select");
		var date = new Date();
		// 获取当前的年
		var nowYear = date.getFullYear();
		for (var i = nowYear - 100; i <= nowYear; i++) {
			var optionYear = document.createElement("option");
			optionYear.innerHTML = i;
			optionYear.value = i;
			selects[0].appendChild(optionYear);
		}
		for (var i = 1; i <= 12; i++) {
			var optionMonth = document.createElement("option");
			optionMonth.innerHTML = i;
			optionMonth.value = i;
			selects[1].appendChild(optionMonth);
		}
		getDays(selects[1].value, selects[0].value, selects);
	}
	//
	function getDaysInMonth(month, year) {
		var days;
		if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8
				|| month == 10 || month == 12) {
			days = 31;
		} else if (month == 4 || month == 6 || month == 9 || month == 11) {
			days = 30;
		} else {
			if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
				// 判断是否为润二月
				days = 29;
			} else {
				days = 28;
			}
		}
		return days;
	}
	function setDays() {
		var selects = document.getElementsByTagName("select");
		var year = selects[0].options[selects[0].selectedIndex].value;
		var month = selects[1].options[selects[1].selectedIndex].value;
		getDays(month, year, selects);
	}
	function getDays(month, year, selects) {
		var days = getDaysInMonth(month, year);
		selects[2].options.length = 0;
		for (var i = 1; i <= days; i++) {
			var optionDay = document.createElement("option");
			optionDay.innerHTML = i;
			optionDay.value = i;
			selects[2].appendChild(optionDay);
		}
	}
	function checkusername() {
		var regex = /^[0-9A-Za-z_]{6,15}$/
		var s = document.getElementById("username").value;
		alert(regex.exec(s));
	}
	function checkUserpinYin() {
		var regex = /^[0-9A-Za-z_]{6,15}$/
		var s = document.getElementById("username").value;
		alert(regex.exec(s));
	}
</script>
<script type="text/javascript">
    $(document).ready(function(){
        //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
        $("form :input.required").each(function(){ 
            //创建元素
            var $required = $("<strong class='high'>*</strong>");
            //将它追加到文档中
            $(this).parent().append($required);
        });
        
        //为表单的必填文本框添加相关事件（blur、focus、keyup）
        $("form :input").blur(function(){
            //注意：这里的this是DOM对象，$(this)才是jQuery对象
            var $parent = $(this).parent();
            //删除之前的错误提醒信息
            $parent.find(".msg").remove();
            //验证“用户账户”
            if($(this).is("#usernum")){
                //运用jQuery中的$.trim()方法，去掉首位空格
                if($.trim(this.value) == "" || $(this).val($(this).val().replace(/\D|^0/g,''))&&$.trim(this.value).length>4){
                    var errorMsg = " 请输入至少4位数字！";
                    //class='msg onError' 中间的空格是层叠样式的格式
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                }
            }
          //真实姓名
            if($(this).is("#username")){
                if($.trim(this.value) == "" || $.trim(this.value).length < 6){
                    var errorMsg = "请输入至少6位的名称！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
            }
          //民族
            if($(this).is("#national")){
                if($.trim(this.value) == "" || $.trim(this.value).length < 6){
                    var errorMsg = "请输入至少6位的名称！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
            }
            //验证“联系手机”
            if($(this).is("#phone")){
                //运用jQuery中的$.trim()方法，去掉首位空格
                if($.trim(this.value) == "" || $(this).val($(this).val().replace(/\D|^0/g,''))&&$.trim(this.value).length==11){
                    var errorMsg = " 请输入至少11位数字！";
                    //class='msg onError' 中间的空格是层叠样式的格式
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                }
            }
            //验证邮箱
            if($(this).is("#email")){
                if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
                    var errorMsg = "请输入正确的E-Mail地址！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
            }
          //出 生 地
            if($(this).is("#address")){
                if($.trim(this.value) == "" || $.trim(this.value).length <3){
                    var errorMsg = "请正确填写信息！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
            }
            //所在单位
            if($(this).is("#work")){
                if($.trim(this.value) == "" || $.trim(this.value).length < 3){
                    var errorMsg = "请正确填写信息！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
            }
          //密码
            if($(this).is("#password")){
                if($.trim(this.value) == "" || $.trim(this.value).length > 6 && $.trim(this.value).length >7){
                    var errorMsg = "密码不能为空，请正确填写信息，密码为6位！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
            }
          //确认密码
            if($(this).is("#confirmPassword")){
                if($.trim(this.value) == ""){
                    var errorMsg = "密码不能为空，";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                }
        }).keyup(function(){
            //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });
        /* 两次密码验证 */
    	$("#confirmPassword").blur(function()
    	{  
    		if($("#confirmPassword").val()!=$("#password").val()) 
    			{   
    				alert("两次输入密码不一致"); 
    				$("#confirmPassword").focus(); 
    			} 
    	})
        //点击重置按钮时，触发文本框的失去焦点事件
        $("#send").click(function(){
            //trigger 事件执行完后，浏览器会为submit按钮获得焦点
            $("form .required:input").trigger("blur"); 
            var numError = $("form .onError").length;
            if(numError){
                return false;
            }
            alert("注册成功，密码已发到你的邮箱");
        });
    });
	
    </script>	
<body>

	<%
		request.setCharacterEncoding("GBK");
	%>
	<h2>用户信息注册</h2>
	<form
		action="<%=request.getContextPath()%>/UserInfoController?action=registerAdd"
		method="post">
		<table class="dd">
			<tr>
				<td>用户账户：</td>
				<td><input type="text" name="usernum" id="usernum" class="required"/></td>
			</tr>
			<tr>
				<td>真实姓名：</td>
				<td><input type="text" name="username" id="username" class="required"/></td>
			</tr>
			<tr>
				<td>性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别：</td>
				<td><input type="radio" name="sex" value="男" />男 <input
					type="radio" name="sex" value="女" />女</td>
			</tr>
			<tr>
				<td>民&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp族：</td>
				<td><input type="text" name="national" id="national"class="required"/></td>
			</tr>
			<tr>
				<td>联系手机：</td>
				<td><input type="text" name="phone" id="phone" maxlength=11 class="required"/></td>
			</tr>
			<tr>
				<td>E-mail&nbsp&nbsp&nbsp&nbsp&nbsp：</td>
				<td><input type="text" name="email" id="email" class="required"/></td>
			</tr>
			<tr>
				<td>生&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp日：</td>
				<td><select onchange="setDays()" name="year"></select>年<select
					onchange="setDays()" name="mon"></select>月<select name="days"></select>日</td>
			</tr>
			<tr>
				<td>出&nbsp&nbsp生&nbsp&nbsp地：</td>
				<td><input type="text" name="address" id="address"class="required"/></td>
			</tr>
			<tr>
				<td>所在单位：</td>
				<td><input type="text" name="work" id="work"class="required"/></td>
			</tr>
			<tr>
				<td>密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码：</td>
				<td><input type="password" name="password" id="password" class="required"/></td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td><input type="password" name="confirmPassword" id="confirmPassword" class="required"/></td>
			</tr>
			<tr>
				<td colspan="1"><input type="submit" value="注册" id="send" /></td>
			</tr>
		</table>
	</form>
 
</body>
</html>